<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="消息中心"
            :hasBack="false"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <!-- 消息列表 -->
            <div class="message-list">
                <div
                    class="message-item"
                    v-for="(item,index) of messageList"
                    :key="index"
                    @click="goDetail(item.messageType)"
                >
                    <img
                        class="item-icon"
                        :src="item.messageIcon"
                    />
                    <div class="item-info">
                        <div class="item-title">{{item.messageTitle}}</div>
                        <!-- <div class="item-detail">{{item.messageDetail}}</div> -->
                    </div>
                </div>
            </div>
            <!-- 消息列表 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 共用底部导航栏 -->
        <common-footer nowPage="1"></common-footer>
        <!-- 共用底部导航栏 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonFooter from '@/components/Footer'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'MessageCenter',
    components: {
        CommonHeader,
        CommonScroll,
        CommonFooter
    },
    data () {
        return {
            scrollStyle: {
                top: "1.11rem",
                left: "0",
                right: "0",
                bottom: "1.17rem",
            },
            messageList: [
                {
                    messageType: 0,
                    messageIcon: require('../../assets/images/messageCenter/message.png'),
                    messageTitle: '订单通知',
                    messageDetail: ''
                },
                {
                    messageType: 1,
                    messageIcon: require('../../assets/images/messageCenter/system.png'),
                    messageTitle: '系统推送',
                    messageDetail: ''
                },
                {
                    messageType: 2,
                    messageIcon: require('../../assets/images/messageCenter/active.png'),
                    messageTitle: '促销活动',
                    messageDetail: ''
                }
            ]
        }
    },
    methods: {
        goDetail (value) {
            this.$router.push(
                {
                    path: '/messageCenter/messageDetail',
                    query: { messageType: value }
                }
            )
        }
    }
}
</script>

<style lang="stylus" scoped>
.message-list
    background #fff
    padding-left 0.31rem
    .message-item
        display flex
        align-items center
        height 1.79rem
        border-bottom 1px solid #e5e5e5
        .item-icon
            width 1.2rem
            height 1.2rem
        .item-info
            flex 1
            min-width 1px
            padding 0 0.31rem
            .item-title
                font-size 0.38rem
                color #333
            .item-detail
                margin-top 0.22rem
                font-size 0.33rem
                color #666
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
    .message-item:last-child
        border none
</style>
